<template>
    <div>
        <div
            id="chart"
            style="width: 100%; height: 500px; margin-top: 100px"
        ></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
var colors = ["#c23531", "#2f4554", "#3476f1"];

export default {
    data() {
        return {
            char: null,
            subjects: {
                color: colors,
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                    },
                },
                grid: {
                    right: "20%",
                },
                toolbox: {
                    feature: {
                        dataView: { show: true, readOnly: false },
                        restore: { show: true },
                        saveAsImage: { show: true },
                    },
                },
                legend: {
                    data: ["总收入", "交易数量", "平均收入"],
                },
                xAxis: [
                    {
                        type: "category",
                        axisTick: {
                            alignWithLabel: true,
                        },
                        data: [],
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        name: "总收入",
                        min: 0,
                        max: 250000,
                        interval:10000,
                        position: "right",
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: colors[0],
                            },
                        },
                        axisLabel: {
                            formatter: "{value} 元",
                        },
                    },
                    {
                        type: "value",
                        name: "交易数量",
                        min: 0,
                        max: 50,
                         interval:5,
                        position: "right",
                        offset: 80,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: colors[1],
                            },
                        },
                        axisLabel: {
                            formatter: "{value} 次",
                        },
                    },
                    {
                        type: "value",
                        name: "平均收入",
                        min: 0,
                        max: 300000,
                        interval:10000,
                        position: "left",
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: colors[2],
                            },
                        },
                        axisLabel: {
                            formatter: "{value} 元",
                        },
                    },
                ],
                series: [
                    {
                        name: "总收入",
                        type: "bar",
                        data: [
                        ],
                    },
                    {
                        name: "交易数量",
                        type: "bar",
                        yAxisIndex: 1,
                        data: [
                        ],
                    },
                    {
                        name: "平均收入",
                        type: "line",
                        yAxisIndex: 2,
                        data: [
                        ],
                    },
                ],
            },
        };
    },
    created() {
        this.getchart();
    },
    mounted() {
        this.createcharts();
    },
    methods: {
        createcharts() {
            this.char = echarts.init(document.getElementById("chart"));
            this.char.setOption(this.subjects);
        },
        async getchart() {
            const res = await this.api.bank.getchart();
            if (res.code == 200) {
                this.char.setOption({
                    xAxis:[ {
                        data: res.data.timeData,
                    }],
                    series: [
                        { data: res.data.sumMoney },
                        { data: res.data.sumCount },
                        { data: res.data.avgMoney },
                    ],
                });
                
            }
        },
    },
};
</script>

<style>
</style>